<template>
  <div>
    <div class="text-right mb-2">
      <el-button
        size="small"
        icon="el-icon-printer"
        v-show="viewMode"
        :disabled="loading"
        @click="handlePrint"
      >
        打印
      </el-button>
    </div>

    <div ref="approvalRef" v-loading="loading2" :id="printId">
      <table class="w-100">
        <tr>
          <td colspan="4">
            <h4 class="text-center">
              <div>退保审批表</div>
            </h4>
          </td>
        </tr>
      </table>
      <div class="card">
        <div class="card-body">
          <div class="report-title">基本信息</div>
          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">投标名称：</div>
                <div class="dl-dd">{{ section }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">投标时间：</div>
                <div class="dl-dd">{{ unData.create_time }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">投标担保金额：</div>
                <div class="dl-dd">{{ unData.tender_bond || '-' }} 元</div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">投标人：</div>
                <div class="dl-dd">{{ unData.enterprise_name }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">联系电话：</div>
                <div class="dl-dd">{{ unData.bid_agenct_phone }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">营业执照：</div>
                <div class="dl-dd">{{ unData.enterprise_code || '-' }}</div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">开标时间：</div>
                <div class="dl-dd">{{ openTime }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">担保费（元）：</div>
                <div class="dl-dd">{{ unData.gua_fee || '-' }} 元</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">缴费状态：</div>
                <div class="dl-dd">{{ payStatus }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-body">
          <div class="report-title">退保信息</div>

          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">申请时间：</div>
                <div class="dl-dd">{{ unData.gs_create_time }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">退保联系人：</div>
                <div class="dl-dd">{{ unData.agent_name }}</div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">退保联系电话：</div>
                <div class="dl-dd">{{ unData.agent_phone || '-' }}</div>
              </div>
            </div>
          </div>

          <div class="row">
            <div class="col-sm-4">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">退费金额：</div>
                <div class="dl-dd">{{ unData.gua_fee || '-' }} 元</div>
              </div>
            </div>
            <div class="col-sm-8">
              <div class="dl-wrap mb-1">
                <div class="dl-dt">退保原因说明：</div>
                <div class="dl-dd">{{ enumMemoType[unData.memo] }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card mt-3">
        <div class="card-body">
          <div class="report-title">审批信息</div>
          <template v-for="(approve, index) of approval">
            <component
              v-if="approve.show"
              v-bind="$attrs"
              :key="index"
              :table-id="tableId"
              :is="approve.cmpt"
              :view-mode="viewMode"
              :un-data="unData"
              :approve-data="approve"
              @success="handleSuccess"
              @dismiss="handleDismiss"
            ></component>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { printA4 } from '@vimi/utils-tool'
import ApproveCommon from '@/credit/views/county/settle/bond/component/refund/ApproveCommon'
import { getApprove } from '@/credit/mixin/wf'
import { enumPayStatus } from '@/bigcredit/views/letter/abnormal/Index'
import { enumMemoType } from '@/bigcredit/views/letter/refunds/Index'

export default {
  components: {
    ApproveCommon,
  },
  props: {
    tableId: String,
    viewMode: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      enumMemoType,
      loading: false,
      loading2: false,
      approval: [],
      unData: {},
      tableName: 'guarantee_quit_view',
    }
  },
  computed: {
    printId() {
      return `BH_QUIT_APPROVAL-${this.tableId}`
    },
    showInfo() {
      return this.viewMode && !this.approval.some(it => it.show)
    },
    payStatus() {
      return enumPayStatus[this.unData.pay_status]
    },
    openTime() {
      const date = this.unData.open_time || ''
      return `${date.substring(0, 4)}-${date.substring(4, 6)}-${date.substring(
        6,
        8
      )} ${date.substring(8, 10)}:${date.substring(10, 12)}`
    },
    section() {
      return this.unData.section_code
        ? `${this.unData.section_name}-${this.unData.section_code}`
        : this.unData.section_name
    },
  },
  watch: {
    tableId: {
      handler: function () {
        this.unData = {}
        this.approval = []
        if (!this.tableId) {
          return
        }
        this.loading2 = true
        Promise.all([
          this.getInfo(),
          getApprove(
            {
              wfKey: 'BH_QUIT_APPROVAL',
              queryId: this.tableId,
              config: {},
            },
            this.$store.getters.user
          ),
        ])
          .then(([unData, approval]) => {
            const data = approval[0] ?? {}
            const rekey = data.process?.wfn_key ?? null
            this.approval = approval.map(item => {
              if (item.process?.wfn_key !== rekey) {
                item.rekey = rekey
              }
              return item
            })
            this.unData = unData
          })
          .finally(() => {
            this.loading2 = false
          })
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    getInfo() {
      return this.$api
        .getData('credit', this.tableName, {
          'id.eq': this.tableId,
        })
        .then(res => res?.data?.[0] ?? {})
    },

    handleSuccess(res) {
      if (!this.tableId) {
        this.unData = {}
        this.approval = []
      }
      this.$emit('success', res)
    },

    handleDismiss() {
      this.$emit('dismiss')
    },

    handlePrint() {
      printA4(
        this.$refs.approvalRef.innerHTML,
        `
        .vertical-align-middle td {vertical-align: middle;}
        .option {min-height: 7rem;}
      `
      )
    },
  },
}
</script>

<style lang="scss" scoped>
.approve-table {
  text-align: center;
  margin-bottom: 0;
  margin-top: -1px;
  td {
    vertical-align: middle;
  }
}

.bg-edit {
  background-color: #ffffee;
}

.text-indent {
  text-align: left;
  text-indent: 2rem;
}

.p-item {
  border-bottom: 1px solid $border-color;
  &:last-child {
    border-bottom: none;
  }
}

.report-title {
  margin-bottom: 1rem;
  font-weight: bold;
  font-size: 1.2rem;
}
</style>
